<script lang="ts" setup>
import { computed } from 'vue'
import type { OOrderAfterSaleListGetItem, OOrderListGetItem } from '@/typed/response'
import { ORDER_STATUS_MAP, TICKET_STATUS_MAP } from '@/const/order'
import { formatTime } from '@/utils'
import { GOODS_TYPE_MAP } from '@/const/goods'

interface IProps {
	show: boolean;
	data: OOrderListGetItem | OOrderAfterSaleListGetItem;
	width?: number | string;
}

const emit = defineEmits(['update:show'])
const props = withDefaults(defineProps<IProps>(), {
	width: 500
})

const showDrawer = computed(() => props.show)

</script>

<template>
	<n-drawer
		v-model:show="showDrawer"
		:width="width"
		close-on-esc
		@update:show="show=>emit('update:show',show)"
	>
		<n-drawer-content closable>
			<template #header>
				<div class="drawerHeader">
					<n-avatar
						:size="60"
						:src="data.userAvatar"
						round
					/>
					<div class="flex">
						<div class="info">
							<div class="desc">买家信息：</div>
							<div class="desc">
								姓名：{{ data.userName }}
							</div>
						</div>
					</div>
				</div>
			</template>
			<section>
				<div>
					<div class="infoItem imgWrap">
						<n-image :height="240" :src="data.goodsHeadImg" object-fit="contain" class="img"/>
					</div>
					<n-divider/>
					<div class="infoItem title">
						<div class="label">订单详情</div>
					</div>
					<div class="infoItem">
						<div class="label">订单号：</div>
						<div class="value">{{ data.orderId }}</div>
					</div>
					<div class="infoItem">
						<div class="label">订单状态：</div>
						<div class="value">{{ ORDER_STATUS_MAP[data.orderStatus] }}</div>
					</div>
					<div class="infoItem">
						<div class="label">商品名称：</div>
						<div class="value">{{ data.goodsName }}</div>
					</div>
					<div class="infoItem">
						<div class="label">交易类型：</div>
						<div class="value">{{ GOODS_TYPE_MAP[data.goodsType] }}</div>
					</div>
					<div class="infoItem">
						<div class="label">{{ data.goodsType === 0 ? '价格' : '起拍价' }}：</div>
						<div class="value">{{ data.goodsPrice }}</div>
					</div>
					<div class="infoItem" v-if="data.goodsType===1">
						<div class="label">加一手：</div>
						<div class="value">{{ data.stepBiddingPrice || '0' }}</div>
					</div>
					<div class="infoItem">
						<div class="label">运费：</div>
						<div class="value">{{ data.postFee }}</div>
					</div>
					<div class="infoItem">
						<div class="label">总费用：</div>
						<div class="value">{{ data.orderSumPayPrice }}</div>
					</div>
					<div class="infoItem">
						<div class="label">下单时间：</div>
						<div class="value">{{ formatTime(data.createTime) }}</div>
					</div>
					<div class="infoItem">
						<div class="label">支付时间：</div>
						<div class="value">{{ formatTime(data.payCompleteTime) }}</div>
					</div>
					<div class="infoItem">
						<div class="label">发货时间：</div>
						<div class="value">{{ formatTime(data.ticketTime) }}</div>
					</div>
					<div class="infoItem">
						<div class="label">物流信息：</div>
						<div class="value">
							<div>
								{{ data.ticketInfo.ticketInfo.ticket }} ({{ data.ticketInfo.ticketInfo.company }})
							</div>
							<div>
								{{ data.ticketInfo.addressInfo.addressUserName }}
								{{ data.ticketInfo.addressInfo.addressUserPhone }}
							</div>
							<div>
								{{ data.ticketInfo.addressInfo.addressUserArea }}
								({{ data.ticketInfo.addressInfo.addressUserDetailAddress }})
							</div>
							<template v-if=" data.ticketInfo.ticketList.length">
								<n-timeline class="timeLine">
									<n-timeline-item
										v-for="s in data.ticketInfo.ticketList"
										:key="s.ticket_time"
										:type="s.status===1?'success':'warning'"
										:title="TICKET_STATUS_MAP[s.status]"
										:content="s.content"
										:time="formatTime(s.ticket_time)"
									/>
								</n-timeline>
							</template>
						</div>
					</div>
				</div>
			</section>
		</n-drawer-content>
	</n-drawer>
</template>

<style lang="less" scoped>

.drawerHeader {
	display: flex;
	align-items: stretch;

	:deep(.n-avatar) {
		flex-shrink: 0;
	}

	.flex {
		flex-grow: 1;
		margin-left: 20px;
		display: flex;
		align-items: center;
		width: 0;

		.info {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 10px;

			.desc {
				font-size: 14px;
			}
		}
	}

	.right {
		margin-left: 10px;
		margin-right: 10px;
		font-size: 14px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}
}

.infoItem {
	display: flex;
	margin-bottom: 10px;
	font-size: 14px;

	&.imgWrap {
		margin-bottom: 20px;

		.img {
			width: 100%;
			background-color: var(--text-color-disabled);

			:deep(img) {
				display: block;
				width: 100%;
				height: 200px;
			}
		}
	}

	&.title {
		margin-bottom: 20px;
		font-size: 16px;
	}

	.label {
		width: 100px;
		flex-shrink: 0;
	}

	.value {
		color: var(--n-close-icon-color-pressed);
	}

	.timeLine {
		margin-top: 30px;
	}
}
</style>
